import React, { Component } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import _ from "lodash";
import {IconFont } from 'enoad-common/src/index';

import { BProps, BState, BaseComponent } from "../../index";

interface IProps extends BProps {
  itemClick: (height: number, item: any) => void;
  item: any;
}

interface IState extends BState {
  isLoading: boolean;
}

export default class FilterLayout extends Component<IProps, IState> {
  layout: any;
  constructor(props: IProps) {
    super(props);
  }

  onItemPress(item: any) {
    if (this.props.itemClick && this.layout) {
      this.layout.measure((ox, oy, width, height, px, py) => {
        this.props.itemClick(py, item);
      });
    }
  }

  renderLayout(items: [any]) {
    let views = new Array();
    _.forEach(items, (item: any, index: number) => {
      if (views.length < 3) {
        views.push(
          <TouchableOpacity
            key={index}
            style={{
              borderRadius: 20,
              borderColor: "#4E80F5",
              borderWidth: 1,
              flexDirection: "row",
              backgroundColor: "white",
              alignItems: "center",
              paddingLeft: 15,
              paddingRight: 15,
              margin: 5,
            }}
            onPress={() => {
              this.onItemPress(item);
            }}
          >
            <Text style={{ fontSize: 11, padding: 2, color: "#4E80F5" }}>
              {item.label}
            </Text>
            <IconFont name={"xiala"} size={6} color={"#4E80F5"} />
          </TouchableOpacity>
        );
      }
    });

    if (views && views.length > 0) {
      return <View style={{ flexDirection: "row" }}>{views}</View>;
    } else {
      return null;
    }
  }

  render() {
    return (
      <View
        ref={(ref) => (this.layout = ref)}
        style={{ flexDirection: "column", backgroundColor: "#FFFFFF" }}
      >
        {this.renderLayout(this.props.item)}
      </View>
    );
  }
}
